<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/animate.css"/>
	<style type="text/css">
		* {
			padding: 0; margin: 0;
		}
		.slider-box {
			margin: 20px auto;
			width: 940px;
			height: 400px; 
			overflow: hidden;
			position: relative;
		}
		.slider-box .slider-imgs {
			position: relative;
			list-style: none;
		}
		.slider-box .slider-imgs li {
			position: absolute;
			left: 0; top: 0;
		}
		.slider-box .slider-imgs li a {
			display: block;
			width: 940px; height: 400px;
		}
		.tab-style {
			display: block;
			width: auto; margin: 10px auto;
		}
		.slider-navs {
			position: absolute;
			list-style: none; left: 50%; bottom: 20px;
			width: 150px; height: 12px;
			margin-left: -60px;
			text-align: center;
			line-height: 14px;
		}
		.slider-navs li {
			width: 12px; height: 12px;
			border-radius: 6px; background: white;
			float: left; 
			margin: auto 12px;
		}
		.slider-navs li.active {
			width: 14px; height: 14px;
			border-radius: 50%;
			border: solid 1px white;
			background: rgba(0,0,0,0);
			margin-top: -2px;
		}
	</style>
	<body>
		<div id="" style="text-align: center;">
			切换方式：
			<select class="tab-style">
				<option value="lightSpeedIn">lightSpeedIn</option>
				<option value="zoomIn">zoomIn</option>
				<option value="fadeIn">fadeIn</option>
				<option value="rollIn">rollIn</option>
				<option value="rotateIn">rotateIn</option>
				<option value="flipInX">flipInX</option>
				<option value="flipInY">flipInY</option>
				<option value="bounceInRight">bounceInRight</option>
				<option value="bounceInLeft">bounceInLeft</option>
				<option value="slideInUp">slideInUp</option>
				<option value="slideInDown">slideInDown</option>
			</select>
			
		</div>
		<div class="slider-box">
			<ul class="slider-imgs">
				<li class="zoomIn animated"><a href="" style="background: url(img/img01.png);"></a></li>
				<li class="fadeOut animated"><a href="" style="background: url(img/img02.png);"></a></li>
				<li class="fadeOut animated"><a href="" style="background: url(img/img03.png);"></a></li>
				<li class="fadeOut animated"><a href="" style="background: url(img/img04.png);"></a></li>
			</ul>	
			<ul class="slider-navs">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload = function(){
			var $list = $(".slider-box ul li");
			var $navs = $(".slider-navs li");
			
			var index = 0;
			setInterval(function(){
				$list.eq(index).removeClass().addClass("fadeOut animated");
				var tab_style = $(".tab-style").val();
				$list.eq(++index>3?index=0:index).removeClass().addClass(tab_style + " animated");
				$navs.eq(index).addClass("active").siblings().removeClass("active");
			},4000);
		}
	</script>
</html>
